import React, { useEffect } from 'react'
import { Outlet } from 'react-router-dom'
import { Layout } from 'antd'
import LayoutHeader from './components/Header/index'
import LayoutTabs from './components/Tabs/index'
import LayoutMenu from './components/Menu/index'
import LayoutFooter from './components/Footer/index'
import { changeCollapse } from '@/redux/modules/menu'
import { RootState, useDispatch, useSelector } from '@/redux'
import './index.scss'

const { Sider, Content } = Layout
const LayoutIndex = () => {
  const dispatch = useDispatch()
  const { isCollapse } = useSelector((state: RootState) => state.menu)
  // 监听窗口大小变化
  const resizeWin = () => {
    window.onresize = () => {
      return (() => {
        const screenWidth = document.body.clientWidth
        if (!isCollapse && screenWidth < 1200) dispatch(changeCollapse(true))
        if (!isCollapse && screenWidth > 1200) dispatch(changeCollapse(false))
      })()
    }
  }
  useEffect(() => {
    resizeWin()
  }, [])
  return (
    <Layout className="container">
      <Sider collapsed={isCollapse}>
        <div style={{ height: 32, margin: 16, background: 'rgba(255, 255, 255, 0.65)' }}>商品后台管理系统</div>
        <LayoutMenu></LayoutMenu>
      </Sider>

      <Layout>
        <LayoutHeader />
        <LayoutTabs />
        <Content style={{ margin: '10px 10px' }}>
          <Outlet></Outlet>
        </Content>
        <LayoutFooter />
      </Layout>
    </Layout>
  )
}

export default LayoutIndex
